import React, {Component} from 'react'
import './index.scss'
import {getHomePage} from "./model"   // 这里在每个页面都有一个model.js
import Banner from './banner'
import TopBar from '../../components/topBar'
import RecentAct from './recentAct'
import Topic from './topic'
import Product from './product'
import Bmfind from './bmfind'
import {Toast} from "antd-mobile";   // https://mobile.ant.design/components/toast-cn/

class Home extends Component {
		constructor(props) {
				super(props);
				this.state = {
						homePageData: null
				}
		}

		render() {
				return (
						<div id="home">
								{/* {...this.props}是props所提供的语法糖，可以将父组件的所有属性复制给子组件 */}
								<TopBar {...this.props} title="" left={true} right={true} leftTo="service" rightTo="search" leftIcon="iconfont icon-kefu" rightIcon="iconfont icon-search"/>
								{/* 数据控制显示 */}
								{
										this.state.homePageData ?
												<div className="container">
														<Banner loopList={this.state.homePageData.banner.list}/>
														<RecentAct actData={this.state.homePageData.activity.list}/>
														<Topic topicData={this.state.homePageData.theme_list}/>
														<Product {...this.props} productData={this.state.homePageData.product}/>
														<Bmfind {...this.props} bmfindData={this.state.homePageData.article_list.list}/>
												</div>
										: null
								}
						</div>
				)
		}
		componentDidMount() {
				// Toast.loading(content, duration, onClose, mask)
				Toast.loading('数据加载中...',0,()=>{},true);
				getHomePage().then(res => {
						console.log('首页数据：',res);
						// setState接收两个参数，当修改之后执行第二个参数
						this.setState({
								homePageData: res
						},() => {
								setTimeout(()=> {
										Toast.hide()
								},500)
						})
				}).catch(err => {
						console.log("网络错误", err);
						Toast.hide();
						Toast.offline('网络错误',0,()=>{},true)
				})
		}

}

export default Home
